<template>
  <div class="headers">
    <div class="footer">
      <table
        border="1px"
        cellspacing="0"
        align="center"
        width="800px"
        height="300px"
      >
        <tr align="center">
          <td>id</td>
          <td>名称</td>
          <td>备注</td>
          <td>操作</td>
        </tr>
        <tr v-for="(i, index) in school_list" :key="index" align="center">
          <td>{{ i.id }}</td>
          <td>{{ i.name }}</td>
          <td>{{ i.about }}</td>
          <td>
            <van-button type="primary" color="pink" @click="del(i.id)"
              >删除</van-button
            >
            <van-button type="primary" color="red" @click="upd(i.id)"
              >修改</van-button
            >
          </td>
        </tr>
      </table>

      <van-field v-model="name" label="名称" placeholder="名称" />
      <van-field v-model="about" label="备注" placeholder="备注" />
      <van-button type="primary" color="pink" @click="add">添加</van-button>

      <br /><br />
      <van-field v-model="updlist.name" label="名称" placeholder="名称" />
      <van-field v-model="updlist.about" label="备注" placeholder="备注" />
      <van-button type="primary" color="pink" @click="update">修改</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_id: localStorage.getItem("id"),
      school_list: [],
      updlist: [],

        name: "",
        about: "",

    };
  },
  methods: {
    // 获取全部学校
    submit: function () {
      this.myaxios(this.weburl + "school/principals/", "get")
        .then((data) => {
          console.log(data);
          if (data.code == 200) {
            this.$toast.success(data.msg);
            this.school_list = data.data;
            console.log(this.school_list);
          } else {
            this.$toast.fali(data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加
    add: function () {
      this.myaxios(this.weburl + "school/principals/", "post", {
        name: this.name,
        about: this.about
      })
      .then((data) => {
        console.log(data)
        if (data.code == 200){
          this.$toast.success(data.msg)
          this.submit();
        }else{
          this.$toast.fali(data.msg)
        }
      }).catch((err) => {
        console.log(err)
      });
    },
    // 删除单个学校
    del: function (id) {
      this.myaxios(this.weburl + "school/principal/" + id + "/", "delete")
        .then((data) => {
          console.log(data);
          if (data.code == 200) {
            this.$toast.success(data.msg);
            this.submit();
          } else {
            this.$toast.fali(data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //  修改单个学校
    upd: function (id) {
      this.myaxios(this.weburl + "school/principal/" + id + "/", "get")
        .then((data) => {
          console.log(data);
          if (data.code == 200) {
            this.updlist = data.data;
            this.$toast.success(data.msg);
          } else {
            this.$toast.fali(data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    update: function () {
      this.myaxios(
        this.weburl + "school/principal/" + this.updlist.id + "/",
        "put",
        this.updlist
      )
        .then((data) => {
          if (data.code == 200) {
            console.log(data);
            this.submit();
            this.$toast.success(data.msg);
          } else {
            this.$toast.fali(data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.submit();
  },
};
</script>

<style>
</style>